<template>
  <div class="student-analysis-container">
    <div class="filter-section">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="课程">
            <a-select v-model:value="filters.course" placeholder="选择课程">
              <a-select-option value="tensorflow">TensorFlow.js深度学习基础</a-select-option>
              <a-select-option value="neural">神经网络与机器学习</a-select-option>
              <a-select-option value="computer-vision">计算机视觉应用</a-select-option>
              <a-select-option value="nlp">自然语言处理</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="班级">
            <a-select v-model:value="filters.class" placeholder="选择班级">
              <a-select-option value="ai2501">人工智能-2501班</a-select-option>
              <a-select-option value="ai2502">人工智能-2502班</a-select-option>
              <a-select-option value="cs2501">计算机科学-2501班</a-select-option>
              <a-select-option value="cs2502">计算机科学-2502班</a-select-option>
              <a-select-option value="ml2501">机器学习-2501班</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="考核类型">
            <a-select v-model:value="filters.examType" placeholder="考核类型">
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="quiz">课堂测验</a-select-option>
              <a-select-option value="homework">课后作业</a-select-option>
              <a-select-option value="project">项目实践</a-select-option>
              <a-select-option value="midterm">期中考试</a-select-option>
              <a-select-option value="final">期末考试</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="时间范围">
            <a-range-picker v-model:value="filters.dateRange" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>

    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="整体学习情况概览" class="section-card">
          <a-row :gutter="16">
            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-title">平均正确率</div>
                <div class="stat-value">82.3%</div>
                <div class="stat-trend up"><arrow-up-outlined /> 7.8% 较上次</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-title">平均完成时间</div>
                <div class="stat-value">45.2 分钟</div>
                <div class="stat-trend down"><arrow-down-outlined /> 5.3 分钟 较上次</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-title">参与人数</div>
                <div class="stat-value">38 人</div>
                <div class="stat-trend"><minus-outlined /> 与上次相同</div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-title">提交率</div>
                <div class="stat-value">97.2%</div>
                <div class="stat-trend up"><arrow-up-outlined /> 3.1% 较上次</div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="TensorFlow.js知识点掌握情况" class="section-card">
          <div ref="knowledgePointChart" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="正确率趋势" class="section-card">
          <div ref="correctRateTrendChart" class="chart"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="学习进度分布" class="section-card">
          <div ref="progressDistributionChart" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="代码质量评估" class="section-card">
          <div ref="codeQualityChart" class="chart"></div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="项目完成情况" class="section-card">
          <div ref="projectCompletionChart" class="chart"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16">
      <a-col :span="16">
        <a-card title="高频错误题目分析" class="section-card">
          <a-table
            :columns="errorQuestionColumns"
            :data-source="errorQuestionData"
            :pagination="{ pageSize: 5 }"
            size="middle"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'errorRate'">
                <a-progress
                  :percent="record.errorRate"
                  :strokeColor="getErrorRateColor(record.errorRate)"
                  size="small"
                />
              </template>
              <template v-if="column.key === 'action'">
                <a @click="showQuestionDetail(record)">查看详情</a>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="学生成绩分布" class="section-card score-distribution-card">
          <div ref="scoreDistributionChart" class="chart score-chart"></div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 新增：AI教学建议详细分析 -->
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="知识点薄弱环节分析" class="section-card">
          <div class="weakness-analysis">
            <div class="weakness-item">
              <div class="weakness-header">
                <a-tag color="red">高优先级</a-tag>
                <span class="weakness-title">模型构建能力</span>
              </div>
              <div class="weakness-content">
                <p>错误率：72% | 影响学生：28人</p>
                <p>主要问题：API使用不熟练、模型结构设计错误</p>
                <div class="suggestion-actions">
                  <a-button type="link" size="small" @click="showDetailedAnalysis('模型构建能力')"
                    >查看详细分析</a-button
                  >
                  <a-button
                    type="link"
                    size="small"
                    @click="showRecommendedExercises('模型构建能力')"
                    >推荐练习</a-button
                  >
                </div>
              </div>
            </div>

            <div class="weakness-item">
              <div class="weakness-header">
                <a-tag color="orange">中优先级</a-tag>
                <span class="weakness-title">数据预处理</span>
              </div>
              <div class="weakness-content">
                <p>错误率：68% | 影响学生：25人</p>
                <p>主要问题：数据标准化顺序错误、形状变换理解不清</p>
                <div class="suggestion-actions">
                  <a-button type="link" size="small" @click="showDetailedAnalysis('数据预处理')"
                    >查看详细分析</a-button
                  >
                  <a-button type="link" size="small" @click="showRecommendedExercises('数据预处理')"
                    >推荐练习</a-button
                  >
                </div>
              </div>
            </div>

            <div class="weakness-item">
              <div class="weakness-header">
                <a-tag color="blue">低优先级</a-tag>
                <span class="weakness-title">模型训练</span>
              </div>
              <div class="weakness-content">
                <p>错误率：65% | 影响学生：22人</p>
                <p>主要问题：回调函数使用不当、异步处理错误</p>
                <div class="suggestion-actions">
                  <a-button type="link" size="small" @click="showDetailedAnalysis('模型训练')"
                    >查看详细分析</a-button
                  >
                  <a-button type="link" size="small" @click="showRecommendedExercises('模型训练')"
                    >推荐练习</a-button
                  >
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="12">
        <a-card title="个性化教学策略" class="section-card">
          <div class="teaching-strategy">
            <div class="strategy-section">
              <h4>📚 推荐教学资源</h4>
              <div class="resource-list">
                <div class="resource-item">
                  <a-tag color="green">视频教程</a-tag>
                  <span>TensorFlow.js CNN模型构建实战</span>
                </div>
                <div class="resource-item">
                  <a-tag color="blue">文档</a-tag>
                  <span>数据预处理最佳实践指南</span>
                </div>
                <div class="resource-item">
                  <a-tag color="purple">项目</a-tag>
                  <span>图像分类项目模板</span>
                </div>
              </div>
            </div>

            <a-divider />

            <div class="strategy-section">
              <h4>🎯 针对性练习</h4>
              <div class="exercise-list">
                <div class="exercise-item">
                  <div class="exercise-info">
                    <span class="exercise-title">CNN模型构建练习</span>
                    <span class="exercise-desc">针对模型结构设计的专项练习</span>
                  </div>
                  <a-button
                    type="primary"
                    size="small"
                    @click="
                      startExercise({
                        id: 1,
                        title: 'CNN模型构建练习',
                        description: '针对模型结构设计的专项练习',
                      })
                    "
                    >开始练习</a-button
                  >
                </div>
                <div class="exercise-item">
                  <div class="exercise-info">
                    <span class="exercise-title">数据预处理训练</span>
                    <span class="exercise-desc">MNIST数据集预处理实战</span>
                  </div>
                  <a-button
                    type="primary"
                    size="small"
                    @click="
                      startExercise({
                        id: 2,
                        title: '数据预处理训练',
                        description: 'MNIST数据集预处理实战',
                      })
                    "
                    >开始练习</a-button
                  >
                </div>
              </div>
            </div>

            <a-divider />

            <div class="strategy-section">
              <h4>👥 学生分组建议</h4>
              <div class="group-suggestion">
                <div class="group-item">
                  <a-tag color="red">需要重点辅导</a-tag>
                  <span>6名学生（得分&lt;70分）</span>
                  <a-button type="link" size="small" @click="showStudentList('需要重点辅导')"
                    >查看名单</a-button
                  >
                </div>
                <div class="group-item">
                  <a-tag color="orange">需要巩固练习</a-tag>
                  <span>12名学生（得分70-80分）</span>
                  <a-button type="link" size="small" @click="showStudentList('需要巩固练习')"
                    >查看名单</a-button
                  >
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 题目详情模态框 -->
    <a-modal v-model:open="questionDetailVisible" title="题目详情" width="700px" :footer="null">
      <template v-if="currentQuestion">
        <div class="question-detail">
          <h3>题目内容</h3>
          <div class="question-content">
            {{ currentQuestion.question }}
          </div>

          <h3>正确答案</h3>
          <div class="question-answer">
            {{ currentQuestion.answer }}
          </div>

          <h3>错误分析</h3>
          <div class="error-analysis">
            <div
              class="error-item"
              v-for="(item, index) in currentQuestion.errorAnalysis"
              :key="index"
            >
              <div class="error-type">错误类型{{ index + 1 }}: {{ item.type }}</div>
              <div class="error-desc">{{ item.description }}</div>
              <div class="error-suggestion">建议: {{ item.suggestion }}</div>
            </div>
          </div>

          <h3>学生错误示例</h3>
          <a-table
            :columns="studentErrorColumns"
            :data-source="currentQuestion.studentErrors"
            :pagination="false"
            size="small"
          />
        </div>
      </template>
    </a-modal>

    <!-- 详细分析模态框 -->
    <a-modal
      v-model:open="detailAnalysisVisible"
      :title="currentWeaknessDetail?.title || '详细分析'"
      width="900px"
      :footer="null"
      class="detail-analysis-modal"
    >
      <template v-if="currentWeaknessDetail">
        <div class="detail-analysis-content">
          <!-- 概览信息 -->
          <div class="analysis-overview">
            <a-row :gutter="16">
              <a-col :span="6">
                <div class="overview-item">
                  <div class="overview-label">错误率</div>
                  <div class="overview-value error-rate">
                    {{ currentWeaknessDetail.overview.errorRate }}%
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="overview-label">影响学生</div>
                  <div class="overview-value">
                    {{ currentWeaknessDetail.overview.affectedStudents }}人
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="overview-label">平均分</div>
                  <div class="overview-value">{{ currentWeaknessDetail.overview.avgScore }}分</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="overview-item">
                  <div class="overview-label">平均用时</div>
                  <div class="overview-value">{{ currentWeaknessDetail.overview.timeSpent }}</div>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 错误类型分析 -->
          <div class="error-types-section">
            <h4>错误类型分析</h4>
            <div class="error-types-list">
              <div
                class="error-type-item"
                v-for="(errorType, index) in currentWeaknessDetail.errorTypes"
                :key="index"
              >
                <div class="error-type-header">
                  <span class="error-type-title">{{ errorType.type }}</span>
                  <a-tag color="red">{{ errorType.percentage }}%</a-tag>
                </div>
                <div class="error-type-desc">{{ errorType.description }}</div>
                <div class="error-examples">
                  <h5>常见错误示例：</h5>
                  <ul>
                    <li v-for="(example, idx) in errorType.examples" :key="idx">{{ example }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 学生表现 -->
          <div class="student-performance-section">
            <h4>学生表现详情</h4>
            <a-table
              :columns="[
                { title: '学生姓名', dataIndex: 'name', key: 'name' },
                {
                  title: '得分',
                  dataIndex: 'score',
                  key: 'score',
                  customRender: ({ text }) => `${text}分`,
                },
                {
                  title: '主要错误',
                  dataIndex: 'errors',
                  key: 'errors',
                  customRender: ({ text }) => text.join(', '),
                },
                {
                  title: '用时',
                  dataIndex: 'timeSpent',
                  key: 'timeSpent',
                  customRender: ({ text }) => `${text}分钟`,
                },
              ]"
              :data-source="currentWeaknessDetail.studentPerformance"
              :pagination="false"
              size="small"
            />
          </div>

          <!-- 改进建议 -->
          <div class="improvement-suggestions-section">
            <h4>改进建议</h4>
            <div class="suggestions-list">
              <div
                class="suggestion-item"
                v-for="(suggestion, index) in currentWeaknessDetail.improvementSuggestions"
                :key="index"
              >
                <div class="suggestion-header">
                  <span class="suggestion-title">{{ suggestion.title }}</span>
                  <a-tag
                    :color="
                      suggestion.priority === 'high'
                        ? 'red'
                        : suggestion.priority === 'medium'
                          ? 'orange'
                          : 'blue'
                    "
                  >
                    {{
                      suggestion.priority === 'high'
                        ? '高优先级'
                        : suggestion.priority === 'medium'
                          ? '中优先级'
                          : '低优先级'
                    }}
                  </a-tag>
                  <span class="suggestion-time">预计{{ suggestion.estimatedTime }}</span>
                </div>
                <p class="suggestion-desc">{{ suggestion.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </a-modal>

    <!-- 推荐练习模态框 -->
    <a-modal
      v-model:open="recommendedExercisesVisible"
      title="推荐练习"
      width="800px"
      :footer="null"
      class="recommended-exercises-modal"
    >
      <div class="recommended-exercises-content">
        <div class="exercises-list">
          <div
            class="exercise-card"
            v-for="exercise in currentRecommendedExercises"
            :key="exercise.id"
          >
            <div class="exercise-header">
              <h3 class="exercise-title">{{ exercise.title }}</h3>
              <div class="exercise-meta">
                <a-tag :color="getDifficultyColor(exercise.difficulty)">{{
                  exercise.difficulty
                }}</a-tag>
                <span class="exercise-time">{{ exercise.estimatedTime }}</span>
              </div>
            </div>

            <p class="exercise-description">{{ exercise.description }}</p>

            <div class="exercise-topics">
              <h5>涉及知识点：</h5>
              <div class="topic-tags">
                <a-tag v-for="topic in exercise.topics" :key="topic" color="blue">{{
                  topic
                }}</a-tag>
              </div>
            </div>

            <div class="exercise-objectives">
              <h5>学习目标：</h5>
              <ul>
                <li v-for="objective in exercise.objectives" :key="objective">{{ objective }}</li>
              </ul>
            </div>

            <div class="exercise-actions">
              <a-button type="primary" @click="startExercise(exercise)">分配给学生</a-button>
              <a-button>预览练习</a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 练习分配确认模态框 -->
    <a-modal
      v-model:open="exerciseStartVisible"
      title="分配练习"
      width="600px"
      @ok="confirmStartExercise"
      ok-text="确认分配"
      cancel-text="取消"
    >
      <div class="exercise-assignment" v-if="currentExercise">
        <p>您确定要将以下练习分配给相关学生吗？</p>

        <div class="exercise-info">
          <h4>{{ currentExercise.title }}</h4>
          <p>{{ currentExercise.description }}</p>
          <p><strong>预计用时：</strong>{{ currentExercise.estimatedTime || '30分钟' }}</p>
        </div>

        <div class="assignment-options">
          <h4>分配选项：</h4>
          <a-checkbox-group v-model:value="assignmentOptions">
            <a-checkbox value="immediate">立即分配</a-checkbox>
            <a-checkbox value="notify">发送通知</a-checkbox>
            <a-checkbox value="deadline">设置截止时间</a-checkbox>
          </a-checkbox-group>
        </div>
      </div>
    </a-modal>

    <!-- 学生名单模态框 -->
    <a-modal
      v-model:open="studentListVisible"
      :title="currentStudentGroup?.title || '学生名单'"
      width="900px"
      :footer="null"
      class="student-list-modal"
    >
      <template v-if="currentStudentGroup">
        <div class="student-list-content">
          <div class="group-description">
            <p>{{ currentStudentGroup.description }}</p>
          </div>

          <a-table
            :columns="[
              { title: '学生姓名', dataIndex: 'name', key: 'name' },
              { title: '学号', dataIndex: 'studentId', key: 'studentId' },
              {
                title: '平均分',
                dataIndex: 'avgScore',
                key: 'avgScore',
                customRender: ({ text }) => {
                  return h('span', { style: { color: getScoreColor(text) } }, `${text}分`)
                },
              },
              {
                title: '薄弱环节',
                dataIndex: 'weakPoints',
                key: 'weakPoints',
                customRender: ({ text }) =>
                  text.map((point) =>
                    h('a-tag', { color: 'orange', style: { marginRight: '4px' } }, point),
                  ),
              },
              { title: '最后提交', dataIndex: 'lastSubmission', key: 'lastSubmission' },
              {
                title: '出勤率',
                dataIndex: 'attendanceRate',
                key: 'attendanceRate',
                customRender: ({ text }) => `${text}%`,
              },
              {
                title: '作业完成率',
                dataIndex: 'homeworkCompletion',
                key: 'homeworkCompletion',
                customRender: ({ text }) => `${text}%`,
              },
              {
                title: '操作',
                key: 'action',
                customRender: ({ record }) => [
                  h(
                    'a-button',
                    {
                      type: 'link',
                      size: 'small',
                      onClick: () => contactStudent(record),
                    },
                    '联系',
                  ),
                  h(
                    'a-button',
                    {
                      type: 'link',
                      size: 'small',
                      onClick: () => viewStudentDetail(record),
                    },
                    '详情',
                  ),
                  h(
                    'a-button',
                    {
                      type: 'link',
                      size: 'small',
                      onClick: () => scheduleGuidance(record),
                    },
                    '安排辅导',
                  ),
                ],
              },
            ]"
            :data-source="currentStudentGroup.students"
            :pagination="{ pageSize: 10 }"
            size="middle"
          />

          <div class="group-suggestions">
            <h4>针对性建议：</h4>
            <ul>
              <li v-for="suggestion in currentStudentGroup.suggestions" :key="suggestion">
                {{ suggestion }}
              </li>
            </ul>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  MinusOutlined,
  RobotOutlined,
  DownloadOutlined,
  BookOutlined,
  UserOutlined,
  PlayCircleOutlined,
  EyeOutlined,
  TeamOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import * as echarts from 'echarts'

// 过滤条件
const filters = reactive({
  course: '',
  class: '',
  examType: '',
  dateRange: [],
})

// 新增：详细分析相关状态
const detailAnalysisVisible = ref(false)
const currentWeaknessDetail = ref(null)
const recommendedExercisesVisible = ref(false)
const currentRecommendedExercises = ref([])
const exerciseStartVisible = ref(false)
const currentExercise = ref(null)
const studentListVisible = ref(false)
const currentStudentGroup = ref(null)
const assignmentOptions = ref(['immediate', 'notify'])

// Mock数据：详细分析数据
const weaknessDetailData = {
  模型构建能力: {
    title: '模型构建能力详细分析',
    overview: {
      errorRate: 72,
      affectedStudents: 28,
      totalQuestions: 45,
      avgScore: 58.3,
      timeSpent: '平均45分钟',
    },
    errorTypes: [
      {
        type: 'API使用错误',
        percentage: 35,
        description: '学生在使用tf.layers API时经常出现参数错误',
        examples: ['tf.layers.dense()参数顺序错误', '激活函数拼写错误', '输入形状定义不正确'],
      },
      {
        type: '模型结构设计错误',
        percentage: 28,
        description: '对CNN层级结构理解不清，层与层之间连接错误',
        examples: ['卷积层后直接连接全连接层', '池化层参数设置不当', '输出层神经元数量错误'],
      },
      {
        type: '数据流理解错误',
        percentage: 25,
        description: '对张量在网络中的流动过程理解不清',
        examples: ['不理解batch维度', '形状变换位置错误', '梯度传播概念模糊'],
      },
      {
        type: '其他错误',
        percentage: 12,
        description: '包括语法错误、逻辑错误等',
        examples: ['变量命名错误', '异步处理不当', '内存管理问题'],
      },
    ],
    studentPerformance: [
      { name: '张三', score: 45, errors: ['API使用', '模型结构'], timeSpent: 52 },
      { name: '李四', score: 52, errors: ['数据流理解'], timeSpent: 48 },
      { name: '王五', score: 38, errors: ['API使用', '模型结构', '数据流理解'], timeSpent: 65 },
      { name: '赵六', score: 61, errors: ['模型结构'], timeSpent: 42 },
      { name: '钱七', score: 55, errors: ['API使用'], timeSpent: 38 },
    ],
    improvementSuggestions: [
      {
        title: '加强API文档学习',
        description: '组织学生系统学习TensorFlow.js API文档，重点关注layers模块',
        priority: 'high',
        estimatedTime: '2周',
      },
      {
        title: '可视化模型结构',
        description: '使用图形化工具展示CNN结构，帮助学生理解层级关系',
        priority: 'high',
        estimatedTime: '1周',
      },
      {
        title: '实践项目驱动',
        description: '通过完整的图像分类项目，让学生体验完整的模型构建流程',
        priority: 'medium',
        estimatedTime: '3周',
      },
    ],
  },
  数据预处理: {
    title: '数据预处理详细分析',
    overview: {
      errorRate: 68,
      affectedStudents: 25,
      totalQuestions: 38,
      avgScore: 62.1,
      timeSpent: '平均38分钟',
    },
    errorTypes: [
      {
        type: '标准化顺序错误',
        percentage: 42,
        description: '学生经常在错误的时机进行数据标准化',
        examples: [
          '在数据分割前进行标准化',
          '对测试集使用训练集的统计量',
          '重复标准化导致数据异常',
        ],
      },
      {
        type: '张量形状变换错误',
        percentage: 31,
        description: '对张量的reshape、expand_dims等操作理解不清',
        examples: ['reshape参数计算错误', '维度扩展位置不对', '批处理维度处理错误'],
      },
      {
        type: '数据类型转换错误',
        percentage: 27,
        description: '数据类型转换时机和方法选择不当',
        examples: ['float32和int32混用', '图像数据范围处理错误', '标签编码方式错误'],
      },
    ],
    studentPerformance: [
      { name: '孙八', score: 58, errors: ['标准化顺序'], timeSpent: 42 },
      { name: '周九', score: 65, errors: ['张量形状变换'], timeSpent: 35 },
      { name: '吴十', score: 51, errors: ['标准化顺序', '数据类型转换'], timeSpent: 48 },
      { name: '郑一', score: 69, errors: ['张量形状变换'], timeSpent: 32 },
      { name: '王二', score: 56, errors: ['数据类型转换'], timeSpent: 41 },
    ],
    improvementSuggestions: [
      {
        title: '数据预处理流程规范化',
        description: '制定标准的数据预处理流程图，明确每个步骤的顺序和目的',
        priority: 'high',
        estimatedTime: '1周',
      },
      {
        title: '张量操作专项训练',
        description: '设计专门的张量操作练习，包含各种形状变换场景',
        priority: 'medium',
        estimatedTime: '2周',
      },
    ],
  },
  模型训练: {
    title: '模型训练详细分析',
    overview: {
      errorRate: 65,
      affectedStudents: 22,
      totalQuestions: 32,
      avgScore: 64.8,
      timeSpent: '平均41分钟',
    },
    errorTypes: [
      {
        type: '回调函数使用错误',
        percentage: 38,
        description: '对训练过程中的回调函数理解和使用不当',
        examples: [
          'EarlyStopping参数设置错误',
          'ModelCheckpoint路径问题',
          '自定义回调函数逻辑错误',
        ],
      },
      {
        type: '异步处理错误',
        percentage: 35,
        description: '对JavaScript异步编程在机器学习中的应用理解不足',
        examples: ['await使用位置错误', 'Promise链式调用问题', '训练进度监控实现错误'],
      },
      {
        type: '超参数设置错误',
        percentage: 27,
        description: '学习率、批次大小等超参数设置不合理',
        examples: ['学习率过大导致不收敛', '批次大小设置不当', '优化器选择错误'],
      },
    ],
    studentPerformance: [
      { name: '李三', score: 62, errors: ['回调函数'], timeSpent: 45 },
      { name: '张四', score: 68, errors: ['异步处理'], timeSpent: 38 },
      { name: '王五', score: 59, errors: ['超参数设置'], timeSpent: 47 },
      { name: '赵六', score: 71, errors: ['回调函数'], timeSpent: 35 },
      { name: '钱七', score: 63, errors: ['异步处理', '超参数设置'], timeSpent: 43 },
    ],
    improvementSuggestions: [
      {
        title: '异步编程专项训练',
        description: '加强JavaScript异步编程基础，结合机器学习场景练习',
        priority: 'high',
        estimatedTime: '2周',
      },
      {
        title: '超参数调优实验',
        description: '设计对比实验，让学生体验不同超参数对训练效果的影响',
        priority: 'medium',
        estimatedTime: '2周',
      },
    ],
  },
}

// Mock数据：推荐练习
const recommendedExercisesData = {
  模型构建能力: [
    {
      id: 1,
      title: 'CNN基础结构搭建',
      description: '从零开始构建一个简单的卷积神经网络，学习基本的层级结构',
      difficulty: '初级',
      estimatedTime: '30分钟',
      topics: ['tf.layers.conv2d', 'tf.layers.maxPooling2d', 'tf.layers.dense'],
      objectives: ['掌握卷积层的基本用法', '理解池化层的作用', '学会连接不同类型的层'],
    },
    {
      id: 2,
      title: '图像分类模型实战',
      description: '构建完整的图像分类模型，包含数据加载、模型定义、训练和评估',
      difficulty: '中级',
      estimatedTime: '60分钟',
      topics: ['模型编译', '数据预处理', '模型训练', '性能评估'],
      objectives: ['完成端到端的模型构建', '理解模型编译的各个参数', '掌握模型评估方法'],
    },
    {
      id: 3,
      title: '自定义层实现',
      description: '学习如何创建自定义层，扩展TensorFlow.js的功能',
      difficulty: '高级',
      estimatedTime: '90分钟',
      topics: ['tf.layers.Layer', '自定义前向传播', '参数管理'],
      objectives: ['理解层的内部机制', '实现自定义激活函数', '掌握参数初始化方法'],
    },
  ],
  数据预处理: [
    {
      id: 4,
      title: '数据标准化实践',
      description: '学习各种数据标准化方法，理解何时使用哪种方法',
      difficulty: '初级',
      estimatedTime: '25分钟',
      topics: ['归一化', '标准化', '数据范围调整'],
      objectives: ['掌握不同标准化方法', '理解标准化的时机', '避免数据泄露问题'],
    },
    {
      id: 5,
      title: '张量操作综合练习',
      description: '通过各种张量操作练习，熟练掌握形状变换技巧',
      difficulty: '中级',
      estimatedTime: '45分钟',
      topics: ['reshape', 'expandDims', 'squeeze', 'transpose'],
      objectives: ['熟练使用张量操作API', '理解维度变换的原理', '解决常见的形状不匹配问题'],
    },
  ],
  模型训练: [
    {
      id: 6,
      title: '训练回调函数实战',
      description: '学习使用各种回调函数监控和控制训练过程',
      difficulty: '中级',
      estimatedTime: '40分钟',
      topics: ['EarlyStopping', 'ModelCheckpoint', '自定义回调'],
      objectives: ['掌握常用回调函数', '学会自定义回调逻辑', '优化训练过程'],
    },
    {
      id: 7,
      title: '超参数调优实验',
      description: '通过对比实验理解不同超参数对模型性能的影响',
      difficulty: '高级',
      estimatedTime: '75分钟',
      topics: ['学习率调度', '批次大小优化', '优化器选择'],
      objectives: ['理解超参数的作用', '掌握调优策略', '提高模型性能'],
    },
  ],
}

// Mock数据：学生分组
const studentGroupsData = {
  需要重点辅导: {
    title: '需要重点辅导学生名单',
    description: '得分低于70分，需要额外关注和辅导',
    students: [
      {
        id: 1,
        name: '张三',
        studentId: '2021001',
        avgScore: 58.3,
        weakPoints: ['模型构建', 'API使用'],
        lastSubmission: '2025-07-15',
        attendanceRate: 85,
        homeworkCompletion: 70,
      },
      {
        id: 2,
        name: '李四',
        studentId: '2021002',
        avgScore: 62.1,
        weakPoints: ['数据预处理', '张量操作'],
        lastSubmission: '2025-07-14',
        attendanceRate: 90,
        homeworkCompletion: 75,
      },
      {
        id: 3,
        name: '王五',
        studentId: '2021003',
        avgScore: 55.7,
        weakPoints: ['模型构建', '数据预处理', '模型训练'],
        lastSubmission: '2025-07-13',
        attendanceRate: 78,
        homeworkCompletion: 65,
      },
      {
        id: 4,
        name: '赵六',
        studentId: '2021004',
        avgScore: 64.2,
        weakPoints: ['异步处理', '回调函数'],
        lastSubmission: '2025-07-15',
        attendanceRate: 88,
        homeworkCompletion: 80,
      },
      {
        id: 5,
        name: '钱七',
        studentId: '2021005',
        avgScore: 59.8,
        weakPoints: ['模型构建', '超参数调优'],
        lastSubmission: '2025-07-12',
        attendanceRate: 82,
        homeworkCompletion: 68,
      },
      {
        id: 6,
        name: '孙八',
        studentId: '2021006',
        avgScore: 61.5,
        weakPoints: ['数据预处理', '数据类型转换'],
        lastSubmission: '2025-07-14',
        attendanceRate: 86,
        homeworkCompletion: 72,
      },
    ],
    suggestions: [
      '安排每周一对一辅导时间',
      '提供基础概念复习资料',
      '增加实践练习机会',
      '建立学习小组互助',
    ],
  },
  需要巩固练习: {
    title: '需要巩固练习学生名单',
    description: '得分在70-80分之间，基础较好但需要进一步提升',
    students: [
      {
        id: 7,
        name: '周九',
        studentId: '2021007',
        avgScore: 72.4,
        weakPoints: ['模型优化', '高级特性'],
        lastSubmission: '2025-07-15',
        attendanceRate: 92,
        homeworkCompletion: 85,
      },
      {
        id: 8,
        name: '吴十',
        studentId: '2021008',
        avgScore: 75.8,
        weakPoints: ['项目整合', '代码规范'],
        lastSubmission: '2025-07-15',
        attendanceRate: 95,
        homeworkCompletion: 90,
      },
      {
        id: 9,
        name: '郑一',
        studentId: '2021009',
        avgScore: 73.2,
        weakPoints: ['性能优化', '调试技巧'],
        lastSubmission: '2025-07-14',
        attendanceRate: 88,
        homeworkCompletion: 82,
      },
      {
        id: 10,
        name: '王二',
        studentId: '2021010',
        avgScore: 76.5,
        weakPoints: ['算法理解', '数学基础'],
        lastSubmission: '2025-07-15',
        attendanceRate: 90,
        homeworkCompletion: 88,
      },
      {
        id: 11,
        name: '李三',
        studentId: '2021011',
        avgScore: 74.1,
        weakPoints: ['实际应用', '项目经验'],
        lastSubmission: '2025-07-13',
        attendanceRate: 87,
        homeworkCompletion: 83,
      },
      {
        id: 12,
        name: '张四',
        studentId: '2021012',
        avgScore: 77.3,
        weakPoints: ['创新思维', '独立解决问题'],
        lastSubmission: '2025-07-15',
        attendanceRate: 93,
        homeworkCompletion: 87,
      },
    ],
    suggestions: ['提供进阶项目练习', '鼓励参与开源项目', '组织技术分享活动', '安排实习或实践机会'],
  },
}

// 查看详细分析
const showDetailedAnalysis = (weaknessTitle) => {
  currentWeaknessDetail.value = weaknessDetailData[weaknessTitle]
  if (currentWeaknessDetail.value) {
    detailAnalysisVisible.value = true
  } else {
    message.error('暂无该知识点的详细分析数据')
  }
}

// 推荐练习
const showRecommendedExercises = (weaknessTitle) => {
  currentRecommendedExercises.value = recommendedExercisesData[weaknessTitle] || []
  if (currentRecommendedExercises.value.length > 0) {
    recommendedExercisesVisible.value = true
  } else {
    message.error('暂无推荐练习')
  }
}

// 开始练习
const startExercise = (exercise) => {
  currentExercise.value = exercise
  exerciseStartVisible.value = true
}

// 确认开始练习
const confirmStartExercise = () => {
  exerciseStartVisible.value = false
  message.success(`已为学生分配练习："${currentExercise.value.title}"`)
  // 这里可以调用API将练习分配给学生
}

// 查看学生名单
const showStudentList = (groupType) => {
  const groupKey = groupType === '需要重点辅导' ? '需要重点辅导' : '需要巩固练习'
  currentStudentGroup.value = studentGroupsData[groupKey]
  if (currentStudentGroup.value) {
    studentListVisible.value = true
  } else {
    message.error('暂无学生数据')
  }
}

// 联系学生
const contactStudent = (student) => {
  message.success(`正在联系学生：${student.name}`)
}

// 查看学生详情
const viewStudentDetail = (student) => {
  message.info(`查看学生详情：${student.name}`)
}

// 安排辅导
const scheduleGuidance = (student) => {
  message.success(`已为学生 ${student.name} 安排辅导`)
}

// 获取难度颜色
const getDifficultyColor = (difficulty) => {
  const colors = {
    初级: 'green',
    中级: 'blue',
    高级: 'red',
  }
  return colors[difficulty] || 'default'
}

// 获取分数颜色
const getScoreColor = (score) => {
  if (score >= 80) return '#52c41a'
  if (score >= 70) return '#1890ff'
  if (score >= 60) return '#fa8c16'
  return '#ff4d4f'
}

// 图表DOM引用
const knowledgePointChart = ref<HTMLElement | null>(null)
const correctRateTrendChart = ref<HTMLElement | null>(null)
const scoreDistributionChart = ref<HTMLElement | null>(null)
const progressDistributionChart = ref<HTMLElement | null>(null)
const codeQualityChart = ref<HTMLElement | null>(null)
const projectCompletionChart = ref<HTMLElement | null>(null)

// 图表实例
let knowledgePointChartInstance: echarts.ECharts | null = null
let correctRateTrendChartInstance: echarts.ECharts | null = null
let scoreDistributionChartInstance: echarts.ECharts | null = null
let progressDistributionChartInstance: echarts.ECharts | null = null
let codeQualityChartInstance: echarts.ECharts | null = null
let projectCompletionChartInstance: echarts.ECharts | null = null

// 错误题目表格列定义
const errorQuestionColumns = [
  {
    title: '题号',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: '知识点',
    dataIndex: 'knowledgePoint',
    key: 'knowledgePoint',
    width: 120,
  },
  {
    title: '题目概述',
    dataIndex: 'summary',
    key: 'summary',
    ellipsis: true,
  },
  {
    title: '错误率',
    dataIndex: 'errorRate',
    key: 'errorRate',
    width: 150,
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
  },
]

// 错误题目数据
const errorQuestionData = [
  {
    key: '1',
    id: '3',
    knowledgePoint: '模型构建',
    summary: '使用TensorFlow.js构建卷积神经网络',
    errorRate: 72,
    question:
      '使用TensorFlow.js构建一个用于图像分类的CNN模型，包含2个卷积层、1个池化层和2个全连接层。',
    answer:
      'const model = tf.sequential(); model.add(tf.layers.conv2d({filters: 32, kernelSize: 3, activation: "relu", inputShape: [28, 28, 1]})); model.add(tf.layers.maxPooling2d({poolSize: 2})); model.add(tf.layers.conv2d({filters: 64, kernelSize: 3, activation: "relu"})); model.add(tf.layers.flatten()); model.add(tf.layers.dense({units: 128, activation: "relu"})); model.add(tf.layers.dense({units: 10, activation: "softmax"}));',
    errorAnalysis: [
      {
        type: 'API使用错误',
        description: '学生混淆了TensorFlow.js的API调用方式',
        suggestion: '加强对TensorFlow.js API文档的学习和练习',
      },
      {
        type: '模型结构错误',
        description: '卷积层参数设置不正确',
        suggestion: '理解卷积神经网络的基本结构和参数含义',
      },
    ],
    studentErrors: [
      {
        key: '1',
        student: '张三',
        errorAnswer: 'model.add(tf.layers.conv2d({filters: 32, kernelSize: 5}))',
        analysis: 'kernelSize参数设置错误',
      },
      {
        key: '2',
        student: '李四',
        errorAnswer: 'model.add(tf.layers.dense({units: 10, activation: "sigmoid"}))',
        analysis: '输出层激活函数选择错误',
      },
      {
        key: '3',
        student: '王五',
        errorAnswer: 'model.add(tf.layers.conv2d({filters: 32, inputShape: [28, 28, 1]}))',
        analysis: '缺少activation参数',
      },
    ],
  },
  {
    key: '2',
    id: '7',
    knowledgePoint: '数据预处理',
    summary: '图像数据标准化和归一化处理',
    errorRate: 68,
    question: '对MNIST数据集进行预处理，包括数据标准化和形状变换，使其适合CNN模型训练。',
    answer:
      'const normalized = data.div(255.0); const reshaped = normalized.reshape([-1, 28, 28, 1]);',
    errorAnalysis: [
      {
        type: '数据操作错误',
        description: '数据标准化和形状变换顺序错误',
        suggestion: '明确数据预处理的步骤和顺序',
      },
    ],
    studentErrors: [
      {
        key: '1',
        student: '赵六',
        errorAnswer:
          'const reshaped = data.reshape([-1, 28, 28, 1]); const normalized = reshaped.div(255.0);',
        analysis: '先reshape后normalize，顺序错误',
      },
      {
        key: '2',
        student: '孙七',
        errorAnswer: 'const normalized = data.div(255);',
        analysis: '缺少.0，数据类型错误',
      },
    ],
  },
  {
    key: '3',
    id: '12',
    knowledgePoint: '模型训练',
    summary: '使用fit方法训练模型并设置回调函数',
    errorRate: 65,
    question: '使用TensorFlow.js训练模型，设置epochs为10，batchSize为32，并添加早停回调函数。',
    answer:
      'await model.fit(xTrain, yTrain, {epochs: 10, batchSize: 32, callbacks: [tf.callbacks.earlyStopping({patience: 3})]});',
    errorAnalysis: [
      {
        type: '回调函数使用错误',
        description: '早停回调函数参数设置不正确',
        suggestion: '理解各种回调函数的作用和参数设置',
      },
      {
        type: '异步处理错误',
        description: '忘记使用await关键字',
        suggestion: '注意模型训练的异步特性',
      },
    ],
    studentErrors: [
      {
        key: '1',
        student: '周八',
        errorAnswer: 'model.fit(xTrain, yTrain, {epochs: 10, batchSize: 32});',
        analysis: '缺少await和回调函数',
      },
      {
        key: '2',
        student: '吴九',
        errorAnswer:
          'await model.fit(xTrain, yTrain, {epochs: 10, batchSize: 32, callbacks: [tf.callbacks.earlyStopping()]});',
        analysis: '早停回调缺少patience参数',
      },
    ],
  },
]

// 学生错误示例表格列
const studentErrorColumns = [
  { title: '学生', dataIndex: 'student', key: 'student', width: 100 },
  { title: '错误答案', dataIndex: 'errorAnswer', key: 'errorAnswer' },
  { title: '分析', dataIndex: 'analysis', key: 'analysis' },
]

// 当前查看的题目详情
const currentQuestion = ref(null)
const questionDetailVisible = ref(false)

// 查看题目详情
const showQuestionDetail = (record: any) => {
  currentQuestion.value = record
  questionDetailVisible.value = true
}

// 获取错误率颜色
const getErrorRateColor = (rate: number) => {
  if (rate >= 70) return '#f5222d'
  if (rate >= 50) return '#fa8c16'
  return '#52c41a'
}

onMounted(() => {
  initCharts()

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', handleResize)
})

// 初始化图表
function initCharts() {
  // TensorFlow.js知识点掌握情况雷达图
  if (knowledgePointChart.value) {
    knowledgePointChartInstance = echarts.init(knowledgePointChart.value)
    knowledgePointChartInstance.setOption({
      radar: {
        indicator: [
          { name: 'TensorFlow.js基础', max: 100 },
          { name: '模型构建', max: 100 },
          { name: '数据预处理', max: 100 },
          { name: '模型训练', max: 100 },
          { name: '模型评估', max: 100 },
          { name: '实际应用', max: 100 },
        ],
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: [88, 72, 85, 78, 82, 75],
              name: '班级平均',
              areaStyle: {
                color: 'rgba(32, 161, 218, 0.3)',
              },
            },
            {
              value: [85, 70, 82, 75, 80, 72],
              name: '年级平均',
              areaStyle: {
                color: 'rgba(82, 196, 26, 0.3)',
              },
            },
          ],
        },
      ],
    })
  }

  // 正确率趋势折线图
  if (correctRateTrendChart.value) {
    correctRateTrendChartInstance = echarts.init(correctRateTrendChart.value)
    correctRateTrendChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周'],
      },
      yAxis: {
        type: 'value',
        min: 60,
        max: 100,
        axisLabel: {
          formatter: '{value}%',
        },
      },
      series: [
        {
          name: '正确率',
          type: 'line',
          data: [75, 78, 76, 82, 79, 85, 83, 87],
          smooth: true,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
            ],
          },
        },
      ],
    })
  }

  // 学习进度分布饼图
  if (progressDistributionChart.value) {
    progressDistributionChartInstance = echarts.init(progressDistributionChart.value)
    progressDistributionChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      series: [
        {
          name: '学习进度',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 8, name: '优秀 (90%+)', itemStyle: { color: '#52c41a' } },
            { value: 12, name: '良好 (80-90%)', itemStyle: { color: 'rgb(32, 161, 218)' } },
            { value: 10, name: '中等 (70-80%)', itemStyle: { color: '#faad14' } },
            { value: 6, name: '及格 (60-70%)', itemStyle: { color: '#fa8c16' } },
            { value: 2, name: '不及格 (<60%)', itemStyle: { color: '#f5222d' } },
          ],
        },
      ],
    })
  }

  // 代码质量评估柱状图
  if (codeQualityChart.value) {
    codeQualityChartInstance = echarts.init(codeQualityChart.value)
    codeQualityChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['代码规范', '算法效率', '错误处理', '文档注释', '测试覆盖'],
      },
      yAxis: {
        type: 'value',
        max: 100,
        axisLabel: {
          formatter: '{value}%',
        },
      },
      series: [
        {
          name: '质量评分',
          type: 'bar',
          data: [85, 78, 72, 68, 75],
          itemStyle: {
            color: function (params: any) {
              const colors = ['#52c41a', 'rgb(32, 161, 218)', '#faad14', '#fa8c16', '#722ed1']
              return colors[params.dataIndex]
            },
          },
        },
      ],
    })
  }

  // 项目完成情况漏斗图
  if (projectCompletionChart.value) {
    projectCompletionChartInstance = echarts.init(projectCompletionChart.value)
    projectCompletionChartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}',
      },
      series: [
        {
          name: '项目完成',
          type: 'funnel',
          left: '10%',
          top: 60,
          width: '80%',
          height: '80%',
          min: 0,
          max: 38,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside',
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid',
            },
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          emphasis: {
            label: {
              fontSize: 20,
            },
          },
          data: [
            { value: 38, name: '项目开始' },
            { value: 35, name: '需求分析' },
            { value: 32, name: '模型设计' },
            { value: 28, name: '代码实现' },
            { value: 25, name: '测试验证' },
            { value: 22, name: '项目完成' },
          ],
        },
      ],
    })
  }

  // 学生成绩分布直方图
  if (scoreDistributionChart.value) {
    scoreDistributionChartInstance = echarts.init(scoreDistributionChart.value)
    scoreDistributionChartInstance.setOption({
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['<60', '60-70', '70-80', '80-90', '90-100'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [2, 6, 10, 12, 8],
          itemStyle: {
            color: function (params: any) {
              const colors = ['#f5222d', '#fa8c16', '#faad14', '#52c41a', 'rgb(32, 161, 218)']
              return colors[params.dataIndex]
            },
          },
        },
      ],
    })
  }
}

// 处理窗口大小变化
function handleResize() {
  knowledgePointChartInstance?.resize()
  correctRateTrendChartInstance?.resize()
  scoreDistributionChartInstance?.resize()
  progressDistributionChartInstance?.resize()
  codeQualityChartInstance?.resize()
  projectCompletionChartInstance?.resize()
}
</script>

<style scoped>
.student-analysis-container {
  padding: 20px 16px 32px;
  background: linear-gradient(135deg, rgb(32, 161, 218) 0%, rgb(25, 118, 210) 100%);
  min-height: 100vh;
  animation: fade-in-page 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes fade-in-page {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-title {
  font-size: 22px;
  margin-bottom: 16px;
  color: rgb(32, 161, 218);
  font-weight: 600;
  position: relative;
  padding-left: 12px;
  z-index: 1;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 4px;
  background: linear-gradient(to bottom, rgb(32, 161, 218), #52c41a);
  border-radius: 2px;
}

.filter-section {
  margin-bottom: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(32, 161, 218, 0.15);
  backdrop-filter: blur(10px);
  animation: card-fade-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
}

.section-card {
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 24px rgba(32, 161, 218, 0.1);
  border: none;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  animation: card-fade-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.section-card:hover {
  box-shadow: 0 12px 36px rgba(32, 161, 218, 0.2);
  transform: translateY(-4px) scale(1.01);
  background: rgba(255, 255, 255, 0.98);
}

@keyframes card-fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  height: 100%;
  box-shadow: 0 6px 20px rgba(32, 161, 218, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  animation: fade-in-stat 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-card:hover {
  box-shadow: 0 12px 32px rgba(32, 161, 218, 0.2);
  transform: translateY(-4px) scale(1.03);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
}

@keyframes fade-in-stat {
  to {
    opacity: 1;
    transform: none;
  }
}

.stat-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  background: linear-gradient(45deg, rgb(32, 161, 218), #52c41a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  animation: value-pop 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes value-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.stat-trend {
  font-size: 12px;
  color: #888;
  display: inline-block;
  animation: trend-bounce 1.2s infinite alternate;
  font-weight: 500;
}

@keyframes trend-bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2px) scale(1.05);
  }
}

.stat-trend.up {
  color: #52c41a;
}

.stat-trend.down {
  color: #f5222d;
}

.chart {
  height: 240px;
  width: 100%;
  opacity: 0;
  animation: chart-fade-in 1s 0.2s forwards;
  border-radius: 8px;
  overflow: hidden;
}

@keyframes chart-fade-in {
  to {
    opacity: 1;
  }
}

.ai-suggestion {
  padding: 8px 0;
}

:deep(.ant-table) {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(32, 161, 218, 0.1);
  backdrop-filter: blur(10px);
  animation: fade-in-table 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

@keyframes fade-in-table {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 题目详情样式 */
.question-detail h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 16px;
  color: rgb(32, 161, 218);
  font-weight: 600;
}

.question-content,
.question-answer {
  background: linear-gradient(135deg, #f6faff, #e6f7ff);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  border-left: 3px solid rgb(32, 161, 218);
  box-shadow: 0 3px 8px rgba(32, 161, 218, 0.1);
}

.error-analysis {
  margin-bottom: 16px;
}

.error-item {
  margin-bottom: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #fff7e6, #fff2e8);
  border-radius: 8px;
  border-left: 3px solid #fa8c16;
  box-shadow: 0 3px 8px rgba(250, 140, 22, 0.1);
}

.error-type {
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
  font-size: 14px;
}

.error-desc {
  margin-bottom: 6px;
  color: #666;
  line-height: 1.5;
}

.error-suggestion {
  color: rgb(32, 161, 218);
  font-weight: 500;
}

/* AI教学建议卡片样式 */
.ai-suggestion-card {
  margin-top: 16px;
  border-left: 3px solid rgb(32, 161, 218);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.9));
}

.ai-suggestion-card:hover {
  border-left-color: rgb(64, 169, 255);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.95));
}

/* 薄弱环节分析样式 */
.weakness-analysis {
  padding: 4px 0;
}

.weakness-item {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 248, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.weakness-item:hover {
  box-shadow: 0 6px 20px rgba(32, 161, 218, 0.15);
  transform: translateY(-2px) scale(1.01);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.9));
}

.weakness-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 6px;
}

.weakness-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.weakness-content p {
  margin-bottom: 6px;
  color: #666;
  line-height: 1.4;
  font-size: 13px;
}

.weakness-content p:first-child {
  font-weight: 500;
  color: #333;
}

.suggestion-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.suggestion-actions .ant-btn-link {
  color: rgb(32, 161, 218);
  font-size: 12px;
  padding: 2px 6px;
}

.suggestion-actions .ant-btn-link:hover {
  color: rgb(64, 169, 255);
}

/* 教学策略样式 */
.teaching-strategy {
  padding: 4px 0;
}

.strategy-section {
  margin-bottom: 12px;
}

.strategy-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(248, 248, 248, 0.8);
  border-radius: 6px;
  transition: all 0.3s;
  font-size: 13px;
}

.resource-item:hover {
  background: rgba(240, 248, 255, 0.9);
  transform: translateX(3px);
}

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 248, 0.8));
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
}

.exercise-item:hover {
  box-shadow: 0 3px 12px rgba(32, 161, 218, 0.15);
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.9));
}

.exercise-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exercise-title {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.exercise-desc {
  color: #666;
  font-size: 11px;
}

.exercise-item .ant-btn-primary {
  background: rgb(32, 161, 218);
  border-color: rgb(32, 161, 218);
  font-size: 12px;
  padding: 2px 8px;
  height: 24px;
}

.exercise-item .ant-btn-primary:hover {
  background: rgb(64, 169, 255);
  border-color: rgb(64, 169, 255);
}

.group-suggestion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 248, 248, 0.8));
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
}

.group-item:hover {
  box-shadow: 0 3px 12px rgba(32, 161, 218, 0.1);
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 248, 248, 0.9));
}

.group-item span:nth-child(2) {
  flex: 1;
  color: #666;
  font-size: 12px;
}

.group-item .ant-btn-link {
  color: rgb(32, 161, 218);
  font-size: 12px;
  padding: 2px 6px;
}

.group-item .ant-btn-link:hover {
  color: rgb(64, 169, 255);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .student-analysis-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .section-card,
  .stat-card,
  .filter-section {
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
  }

  .stat-title {
    color: #ccc;
  }

  .question-content,
  .question-answer {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
  }

  .error-item {
    background: linear-gradient(135deg, #2d1b1b, #1b2d1b);
    color: #fff;
  }
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .student-analysis-container {
    padding: 16px 12px 24px;
  }

  .stat-card {
    padding: 12px 8px;
  }
  .stat-value {
    font-size: 24px;
  }
  .chart {
    height: 200px;
  }

  .weakness-item,
  .exercise-item,
  .group-item {
    padding: 8px;
  }

  .exercise-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .group-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .student-analysis-container {
    padding: 12px 8px 20px;
  }
  .section-card {
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .stat-card {
    border-radius: 8px;
    padding: 10px 6px;
  }
  .stat-value {
    font-size: 20px;
  }
  .chart {
    height: 160px;
  }
  .filter-section {
    padding: 12px;
  }

  .weakness-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .suggestion-actions {
    flex-direction: column;
    gap: 3px;
  }

  .resource-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}

/* 详细分析模态框样式 */
.detail-analysis-modal .ant-modal-body {
  padding: 24px;
}

.detail-analysis-content {
  max-height: 600px;
  overflow-y: auto;
}

.analysis-overview {
  background: linear-gradient(135deg, #f6f9fc, #ffffff);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.overview-item {
  text-align: center;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.overview-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.overview-value {
  font-size: 20px;
  font-weight: bold;
  color: #262626;
}

.overview-value.error-rate {
  color: #ff4d4f;
}

.error-types-section h4,
.student-performance-section h4,
.improvement-suggestions-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.error-types-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.error-type-item {
  background: #fafafa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #ff4d4f;
}

.error-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.error-type-title {
  font-weight: 600;
  color: #262626;
}

.error-type-desc {
  color: #666;
  margin: 8px 0;
  line-height: 1.5;
}

.error-examples h5 {
  margin: 8px 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.error-examples ul {
  margin: 0;
  padding-left: 20px;
}

.error-examples li {
  color: #666;
  line-height: 1.4;
  margin-bottom: 2px;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.suggestion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.suggestion-title {
  font-weight: 600;
  color: #262626;
}

.suggestion-time {
  font-size: 12px;
  color: #666;
}

.suggestion-desc {
  color: #666;
  line-height: 1.5;
  margin: 0;
}

/* 推荐练习模态框样式 */
.recommended-exercises-modal .ant-modal-body {
  padding: 24px;
}

.recommended-exercises-content {
  max-height: 600px;
  overflow-y: auto;
}

.exercises-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exercise-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.exercise-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.exercise-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.exercise-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exercise-time {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.exercise-description {
  color: #666;
  line-height: 1.5;
  margin: 12px 0;
}

.exercise-topics,
.exercise-objectives {
  margin: 16px 0;
}

.exercise-topics h5,
.exercise-objectives h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exercise-objectives ul {
  margin: 0;
  padding-left: 20px;
}

.exercise-objectives li {
  color: #666;
  line-height: 1.4;
  margin-bottom: 4px;
}

.exercise-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* 练习分配模态框样式 */
.exercise-assignment {
  padding: 16px 0;
}

.exercise-info {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
}

.exercise-info h4 {
  margin: 0 0 8px 0;
  color: #262626;
}

.assignment-options {
  margin-top: 16px;
}

.assignment-options .ant-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 学生名单模态框样式 */
.student-list-modal .ant-modal-body {
  padding: 24px;
}

.student-list-content {
  max-height: 600px;
  overflow-y: auto;
}

.group-description {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.group-description p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.group-suggestions {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.group-suggestions h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.group-suggestions ul {
  margin: 0;
  padding-left: 20px;
}

.group-suggestions li {
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-analysis-modal,
  .recommended-exercises-modal,
  .student-list-modal {
    width: 95% !important;
  }

  .exercise-header {
    flex-direction: column;
    gap: 8px;
  }

  .exercise-meta {
    align-self: flex-start;
  }

  .analysis-overview .ant-row {
    flex-direction: column;
  }

  .overview-item {
    margin-bottom: 8px;
  }
}
</style>
